﻿
<form class="layui-form layui-row layui-col-space16">
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <button class="layui-btn layui-btn-primary layui-border-blue" id="newAdd" name="newAdd">新建优惠券</button>
            <button class="layui-btn layui-btn-primary layui-border-blue" lay-event="getCheckData">使失效</button>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <label class="layui-form-label">优惠券类型</label>
            <div class="layui-input-inline">
                <select id="couponType" name="couponType" lay-filter="couponType">
                </select>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-input-wrap">
            <input type="text" class="layui-input" name="title" id="title" placeholder="请输入优惠券标题" />
        </div>
    </div>



</form>
<div class="layui-col-xs6 layui-col-md12">
    <table class="layui-hide" id="ID-table-demo-data"></table>
    <script type="text/html" id="ID-table-demo-templet-switch">
        <!-- 这里的 checked 的状态值判断仅作为演示 -->
        <input type="checkbox" name="status" value="{{= d.id }}" title="热|" lay-skin="switch" lay-filter="demo-templet-status">
    </script>
</div>
<script>
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;

        function getCoupon() {
            $.ajax({
                url: "http://localhost:5174/api/Conpous/GetCouponType",
                type: "get",
                async: false,
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                success: res => {
                    console.log(res)
                    var content = `<option value="0">全部优惠券</option>`
                    $.each(res, function (index, item) {
                        content += `<option value="${item.value}">${item.name}</option>`
                    })
                    $("#couponType").html(content)
                    form.render('select')
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
        getCoupon();
        var field = {
            "title": $("[name=title]").val(),
            "coupontype": $("[name=couponType]").val(),
            "index": 1,
            "size": 10
        }
        function show() {
            // 此处可执行 Ajax 等操作
           
            $.ajax({
                url: "http://localhost:5174/api/Conpous/GetCouponsAll",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(field),
                async: false,
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                success: res => {
                    // 已知数据渲染
                    table.render({
                        elem: '#ID-table-demo-data',
                        cols: [[ //标题栏
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'title', title: '标题', width: 100, },

                            {

                                field: 'couponType', title: '优惠券类型', width: 100, templet: function (d) {

                                    return d.couponType == 1 ? `<span>优惠券</span>` : d.couponType == 2 ? `<span>折扣券</span>` : '<span>兑换券</span>'

                                }
                            },
                            {
                                field: 'stock', title: '库存', width: 120, templet: function (d) {

                                    return d.surplusStock + "/" + d.stock;

                                }
                            },
                            { field: 'validityDate', title: '有效期', width: 200, },
                            // 模板 - 函数写法
                            {
                                field: 'couponStatu', width: 80, title: '状态', templet: function (d) {
                                    if (d.couponStatu === false) {
                                        return '<span class="layui-badge layui-bg-green">启用</span>';
                                    } else {
                                        return '<span class="layui-badge">弃用</span>';
                                    }
                                }
                            },
                        ]],
                        data: res.data.data,
                        skin: 'line', // 表格风格
                        even: true,
                        page: true, // 是否显示分页
                        limits: [5, 10, 15],
                        limit: 5 // 每页默认显示的数量
                    });
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
        show();
        $(document).on("click", "#newAdd", function () {
            alert('ss')
            location.href = "/coupons/couponsaddview"
        })
        $(document).on("blur", "#title", function () {
            
            field.title = $("#title").val()
            show()
        })
        // 示例触发修改选项的事件
        // 监听下拉框的改变事件
        form.on('select(couponType)', function (data) {
            alert('ss')
            field.coupontype = data.value; // 获取选中的值
            // var selectedText = data.elem[data.elem.selectedIndex].text; // 获取选中的文本
            show();
          

            // 在这里可以根据选中的值执行相应的操作
        });
        $('#couponType').change(function () {
           alert('ss')
           
        });
        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            console.log(id)
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'getCheckData':

                    var data = checkStatus.data;
                    layer.alert(layui.util.escape(JSON.stringify(data)));
                    break;
                case 'getData':
                    var getData = table.getData(id);
                    console.log(getData);
                    layer.alert(layui.util.escape(JSON.stringify(getData)));
                    break;
            };
        });

        // 状态 - 开关操作
        form.on('switch(demo-templet-status)', function (obj) {
            var id = this.value;
            var name = this.name;

        });

    });
</script>